<template>
  <div class="waybill-management-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
        <a-tab-pane key="-1" :tab="`未做发票(${pageStat['-1']})`"></a-tab-pane>
        <a-tab-pane key="1" :tab="`已下单(${pageStat['1']})`"></a-tab-pane>
        <a-tab-pane key="5" :tab="`已入仓(${pageStat['5']})`"></a-tab-pane>
        <a-tab-pane key="8" :tab="`运输中(${pageStat['8']})`"></a-tab-pane>
        <a-tab-pane key="9" :tab="`签收(${pageStat['9']})`"></a-tab-pane>
        <a-tab-pane key="0" :tab="`已取消(${pageStat['0']})`"></a-tab-pane>
        <a-tab-pane key="-2" :tab="`全部(${pageStat['-2']})`"></a-tab-pane>
      </a-tabs>
      <super-table
        :height="tableHeight"
        :activeKey="activeKey"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #tool>
          <div style="display: flex; flex-wrap: wrap">
            <div style="margin-bottom: 5px">
              <a-button type="primary" @click="makeInvoiceHandle" v-if="['-1', '1'].includes(activeKey)">制作发票</a-button>
            </div>

            <!-- 报关管理 -->
            <div v-if="['-1', '1', '5'].includes(activeKey)" v-btnAuth="'CLIENT_CUSTOMS_CLEARANCE'">
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 报关管理 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="customsClearanceHandle">合并报关</a-menu-item>
                    <a-menu-item @click="cancelMergeDeclarationHandle">取消报关</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>

            <!-- 导出 -->
            <div>
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 导出 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="exportPriceHandle">费用导出</a-menu-item>
                    <a-menu-item @click="exportWaybillHandle">运单导出</a-menu-item>
                    <a-button v-debounce @click="VolumeExportHandle">材积明细导出</a-button>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>

            <!-- 打印标签、下载标签 -->
            <div>
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 标签管理 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item v-debounce type="primary" @click="printLabelHandle">打印标签</a-menu-item>
                    <a-menu-item v-debounce type="primary" @click="downloadLabelHandle(undefined)">下载标签</a-menu-item>
                    <a-menu-item @click="downloadLabelHandle(1)"> 合并下载标签 </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </div>
        </template>
        <template #waybillNum="{ row }">
          <a-button type="link" @click="showHandle(row)">{{ row.waybillNum }}</a-button>
        </template>
        <template #driverUserId="{ row }">
          <a-button type="link" v-if="row.shippingMethod === 0"> 查看 </a-button>
        </template>
      </super-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :closable="true" @close="getData" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import Details from "./components/deatils/index.vue";
import MakeInvoice from "./components/makeInvoice/index.vue";
export default {
  name: "ClientWaybillManagement",
  components: {
    Details,
    MakeInvoice
  }
};
</script>
<script lang="ts" setup>
import TableHeightHook from "@/hook/tableHeightHook";
import ModalHook from "@/hook/modalHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { searchItemList, tableColumnMap } from "./data";
import { DownOutlined } from "@ant-design/icons-vue";
import { computed, onActivated, onMounted } from "vue";
const { tableHeight, loading } = TableHeightHook(110);
const tableColumn = computed<Array<SuperTable.TableCoulmnItem | SuperTable.NestTableColumnItem>>(() => {
  return tableColumnMap[activeKey.value];
});
const { tableData, searchForm, drawerOpts, activeKey, pageStat, tableRef } = InitHook();
const {
  searchHandle,
  getData,
  showHandle,
  changeTabHandle,
  makeInvoiceHandle,
  printLabelHandle,
  downloadLabelHandle,
  VolumeExportHandle,
  getPopupContainer,
  customsClearanceHandle,
  cancelMergeDeclarationHandle,
  exportPriceHandle,
  exportWaybillHandle
  // batchDownLoadHandle
} = OperationHook({
  searchForm,
  tableData,
  drawerOpts,
  loading,
  activeKey,
  pageStat,
  tableRef
});

const { drawerSubmitHandle } = ModalHook({
  drawerOpts,
  callBack: () => getData()
});
const init = () => {
  if (history.state.params) {
    searchForm.waybillNumList = JSON.parse(history.state.params.waybillNumList).join();
  }

  searchHandle();
};
onMounted(() => {
  init();
});
onActivated(() => {
  init();
});
</script>
<style lang="stylus" scoped></style>
